<template>
  <div class="list">
    <ul class="top-select">
      <li @click="sort('id')">默认</li>
      <li @click="sort('malMobilePrice')">价格</li>
      <li @click="sort('actualSales')">销量</li>
      <li @click="sort('commentsNumber')">评论</li>
      <li>筛选</li>
    </ul>
    <van-empty description="列表为空,换个选项试试吧!"
     v-if="carlist.length===0"
    />
    <van-card
      :thumb="todo.masterImg"
      v-for="todo in carlist"
      :key="todo.id"
      @click="goToDetail(todo.id)"
    >
    <template #title>
      <div class="van-multi-ellipsis--l2">{{todo.name1}}</div>
    </template>

    <template #price>
      <div class="sectiontwo">
        <div class="price">
          <div>
            ￥<span class="herder-prices">{{todo.malMobilePrice}}</span>
            <span class="reduce">立减</span>
          </div>
          <div>
            月销{{todo.actualSales}}件，有货{{todo.commentsNumber}}条评价
          </div>
          平台自营
        </div>
      </div>
    </template>

    </van-card>
  </div>
</template>
<script>
import { findCommodityList } from '@/api/category'
export default {
  name: 'list',
  data () {
    return {
      carlist: [],
      sortOrder:"Low to high"
    }
  },
  methods: {
    goToDetail (id) {
      // console.log('跳转到详情页的ID为:' + id)
      this.$router.push('/detail?id=' + id)
    },
    sort(meth){
      if(this.sortOrder=="Low to high"){
        console.log('小到大',this.carlist.sort(compare(meth)))
        this.sortOrder="high to Low"
      }
      else{
        this.carlist=this.carlist.sort(compare(meth)).reverse()
        console.log('大到小',this.carlist)
        this.sortOrder="Low to high"
      }
      function compare(property){	
        return function(a,b){
          let value1 = a[property];
          let value2 = b[property]
          return value1 - value2
        }
      }
    }
  },
  watch: {
    $route: {
      handler (newRoute) {
        // newRoute.query 中获取的是 ? 的查询字符串参数数据
        // newRoute.params 获取的是动态路径参数数据
        // 获取路由中传递的主分类 id
        // const { id } = newRoute.query
        console.log('获取id', newRoute.query)
        const { id } = newRoute.query
        console.log('id =', id)
        // 查询子分类
        findCommodityList(id)
          .then(data => {
            console.log('子分类：', data.producListVOs)
            this.carlist = data.producListVOs
          })
          .catch(() => {})
      },
      immediate: true
    }
  }
}
</script>

<style lang="scss" scoped>
.top-select{
    width: 100%;
    height: 50px;
    padding: 10px 0;
    border-bottom: solid 1px #dedede;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;

}
.top-select li{
  width: calc(100% / 5 - 1px);
  line-height: 50px;
  float: left;
  border-right: solid 1px #dedede;
  text-align: center;
  color: #9a9a9a;
  font-size: 14px;
}
.top-select li:hover{
  color: red;
}
.reduce{
  border: 1px solid red;
  border-radius: 5px;
  color: red;
  margin-left: 10px;
  font-size: 12px;
}
.sectiontwo{
  margin-top: 8px;
}
.van-multi-ellipsis--l2{
  color: #252525;
}
.herder-prices{
  color: red;
  font-size: 14px;
}
.price{
  clear: #848689;
}
.product-list .item .p-info h5 {
  margin-bottom: 0px;
}
</style>
